<template>
  <div>
    <div class="header-search-box shadow">
      <sec-form
        :searchBox="{ span: 4 }"
        :span="6"
        :ruleForm="ruleForm"
        :formData="formData"
        @reset="initSearch"
        @submitForm="initSearch"
      >
      </sec-form>
    </div>
    <div class="scene-main tab-scene-main">
      <el-tabs v-model="status" @tab-click="initSearch">
        <el-tab-pane
          v-for="(item, index) in $store.state.dictionary[100600]"
          :key="index"
          :label="item.label"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>

      <sec-table :tableData="tableData" :tableCol="tableCol" ref="secTabel"> </sec-table>

      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { paginationMixin } from "common/js/mixin";
import { upmReportListApi } from "api/authApi";
export default {
  name: "evaluate",
  props: {},
  mixins: [paginationMixin],
  components: {},
  data() {
    return {
      auditType: "",
      status: "",
      ruleForm: { appid: "", name: "", time: "" },
      tableData: [{}],
    };
  },
  computed: {},
  created() {
    this.auditTypeByPath = {
      "/evaluate/manage/auth": "upm_auth",
      "/evaluate/manage/auth/quick": "upm_auth_quick",
    };
    this.pathNameByAuditType = {
      upm_auth: "authEvaluateDetail",
      upm_auth_quick: "authEvaluateQuickDetail",
    };
    this.formData = [
      { type: "text", label: "APPID", prop: "appid" },
      { type: "text", label: "系统名称", prop: "name" },
      { type: "datetimerange", span: 8, label: "发起时间", prop: "time" },
    ];
    this.tableCol = [
      { label: "审计任务ID", prop: "id" }, //报告id reportId
      { label: "APPID", prop: "appid" },
      {
        label: "审计状态",
        prop: "status",
        formatter: (row, column, cellValue, index) => {
          return this.utils.getDicLabel("100600", cellValue && cellValue.slice(0, 1));
        },
      },
      {
        label: "审计流程",
        prop: "status",
        formatter: (row, column, cellValue, index) => {
          if (cellValue == "37") {
            return "已完成";
          }
          return this.utils.getDicLabel("100800", cellValue);
        },
      },
      { label: "回调地址", prop: "domain" },
      { label: "系统名称", prop: "domainName" },
      { label: "权属负责人", prop: "leader" },
      { label: "权属部门", prop: "dept" },
      { label: "发起人", prop: "creator" },
      { label: "发起时间", prop: "createTimeText", width: 150 },
      { label: "结束时间", prop: "endTimeText", width: 150 },
      {
        label: "操作",
        prop: "operation",
        width: 120,
        children: [
          {
            title: "详情",
            click: (data) => {
              let name = this.pathNameByAuditType[this.auditType];
              this.$router.push({
                name,
                query: { id: data.row.id, assetId: data.row.assetId },
              });
            },
          },
        ],
      },
    ];
  },
  mounted() {
    console.log("this.$route.path", this.$route.path);
    this.auditType = this.auditTypeByPath[this.$route.path];
    this.getTableList();
  },
  methods: {
    initSearch() {
      this.page = 1;
      this.getTableList();
    },
    getTableList() {
      let loading = this.openLoading();
      upmReportListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.ruleForm,
        startTime: this.ruleForm.time[0] || "",
        endTime: this.ruleForm.time[1] || "",
        auditType: this.auditType,
        status: this.status === "0" ? "" : this.status,
      }).then((res) => {
        console.log(res);
        loading.close();
        this.totalSize = res.count;
        this.tableData = res.data;
      });
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    currentChange(val) {
      this.page = val;
      this.getTableList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.reportDialog ::v-deep .el-dialog__body {
  position: relative;
  min-height: 200px;
  .down-report {
    position: absolute;
    right: 50%;
    top: 0px;
  }
}
::v-deep .docx-wrapper {
  background: #fff;
}
</style>
